<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 创业项目 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
                <el-date-picker
                    class="mr10"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    v-model="query.dateSection"
                >
                </el-date-picker>
                <el-input placeholder="请输入产品名称查询" class="handle-input mr10" v-model="query.souVal"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
            </div>
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                class="table"
                style="width: 100%"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="SelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="piName" label="项目名称" width="100"></el-table-column>
                <el-table-column prop="piCapital" label="需要资金"></el-table-column>
                <el-table-column prop="piUserName" label="联系人"></el-table-column>
                <el-table-column prop="piAdvantage" label="项目优势" width="300"></el-table-column>
                <el-table-column prop="piContent" label="项目描述" width="300"></el-table-column>
                <el-table-column prop="piContent" label="创建时间" width="180"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" class="red" @click="editBtnclick(scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="delBtnclick(scope.row.piUserId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.limit"
                    :total="page.totalCount"
                    :pager-count="5"
                    @current-change="PageChange"
                    @prev-click="PageChange"
                    @next-click="PageChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="创业项目信息" :visible.sync="dialogData.dialogVisible" width="30%" :close-on-click-modal="false">
                <el-form :rules="rules" ref="ruleForm" :model="dialogData" label-width="80px" v-loading="dialogData.loading">
                    <el-form-item label="项目名称" prop="form.projectName">
                        <el-input v-model="dialogData.form.projectName"></el-input>
                    </el-form-item>
                    <el-form-item label="需要资金" prop="form.capital">
                        <el-input v-model="dialogData.form.capital">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="form.userName">
                        <el-input v-model="dialogData.form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="form.userTel">
                        <el-input v-model="dialogData.form.userTel"></el-input>
                    </el-form-item>
                    <el-form-item label="所属领域" prop="form.field">
                        <el-select v-model="dialogData.form.field" placeholder="请选择所属领域" style="width:100%;">
                            <el-option v-for="item in dialogData.fieldArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目优势" prop="form.advantage">
                        <el-input type="textarea" v-model="dialogData.form.advantage" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
                    </el-form-item>
                    <el-form-item label="项目描述" prop="form.describe">
                        <el-input type="textarea" v-model="dialogData.form.describe" :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogData.dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addFormSubClick" :loading="dialogData.loading">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    startBusinessList,
    startBusinessFieldSelectArr,
    startBusinessAddSub,
    startBusinessEditSub,
    startBusinessDelSub
} from '../../../api/index';

export default {
    data() {
        return {
            loading:false,
            query: {
                page: 1,
                limit: 10,
                dateSection:[],
                souVal:'',
            },
            tableData: [],
            page: {
                totalCount: 100
            },
            dialogData: {
                loading:false,
                dialogVisible: false,
                fieldArr:[],
                form: {
                    projectName:'',
                    capital:'',
                    userName:'',
                    userTel:'',
                    field:'',
                    advantage:'',
                    describe:'',
                },
            },
            rules:{
                'form.projectName':[
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ],
                'form.capital':[
                    { required: true, message: '请输入需要资金',trigger: 'blur'},
                    { required: true,pattern: /\d/,message: '只能输入数字',trigger: 'blur'}
                ],
                'form.userName':[
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                ],
                'form.userTel':[
                    { required: true, message: '请输入正确格式的联系电话', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' },
                ],
                'form.field':[
                    { required: true, message: '请输入所属领域', trigger: 'change' },
                ],
                'form.advantage':[
                    { required: true, message: '请输入项目优势', trigger: 'blur' },
                ],
                'form.describe':[
                    { required: true, message: '请输入项目描述', trigger: 'blur' },
                ],
            },
            editId:'',
        };
    },
    created(){
        this.getList();
        this.fieldSelectArr();
    },
    watch:{
        'dialogData.dialogVisible' (m,n){
            if(!m && this.editId != ''){
                this.editId = '';
                this.$refs['ruleForm'].resetFields();
            }
        },
    },
    methods: {
        //获取列表
        getList(){
            this.loading = true;
            let query = {
                current:this.query.page,
                limit:this.query.limit,
                beginTime:this.query.dateSection[0]?this.query.dateSection[0]:'',
                endTime:this.query.dateSection[1]?this.query.dateSection[1]:'',
                piName:this.query.souVal
            }
            startBusinessList(query).then((res) => {
                this.loading = false;
                if(res.code === 0){
                    this.page.totalCount = res.totalCount;
                    this.tableData = res.projectList;
                }else{
                    this.$message(res.msg);
                }
            });
        },
        //点击搜索
        souClick(){
            this.query.page = 1;
            this.getList();
        },
        //序号
        tableIndex(index) {
            return (this.query.page - 1) * this.query.limit + index + 1;
        },
        //翻页
        PageChange(num) {
            this.query.page = num;
            this.getList();
        },
        //选中
        SelectionChange() {},
        //获取所属领域的值
        fieldSelectArr(){
            startBusinessFieldSelectArr().then((res) => {
                if(res.code === 0){
                    let arr = [];
                    if(res.tagsList.length > 0){
                        res.tagsList.forEach((item,i)=>{
                            arr.push({
                                value:item.tagId,
                                label:item.tagName
                            })
                        })
                        this.dialogData.fieldArr = arr;
                    }
                }else{
                    this.$message(res.msg);
                }
            });
        },
        //新增
        addClick() {
            this.dialogData.dialogVisible = true;
        },
        //新增编辑提交
        addFormSubClick(){
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.dialogData.loading = true;
                    let entity = {
                        "piAdvantage": this.dialogData.form.advantage,
                        "piCapital": this.dialogData.form.capital,
                        "piContent": this.dialogData.form.describe,
                        "piName": this.dialogData.form.projectName,
                        "piPhone": this.dialogData.form.userTel,
                        "piUserName": this.dialogData.form.userName,
                        'piTagId':this.dialogData.form.field
                    }
                    if(this.editId){
                        startBusinessEditSub(entity).then((res) => {
                            this.dialogData.loading = false;
                            if(res.code === 0){
                                this.$message.success("编辑成功");
                                this.dialogData.dialogVisible = false;
                                this.$refs['ruleForm'].resetFields();
                                this.getList();
                            }else{
                                this.$message(res.msg);
                            }
                        });
                    }else{
                        startBusinessAddSub(entity).then((res) => {
                            this.dialogData.loading = false;
                            if(res.code === 0){
                                this.$message.success("添加成功");
                                this.dialogData.dialogVisible = false;
                                this.$refs['ruleForm'].resetFields();
                                this.getList();
                            }else{
                                this.$message(res.msg);
                            }
                        });
                    }
                }else{

                }
            })
        },
        //编辑取值
        editBtnclick(data){
            this.dialogData.dialogVisible = true;
            this.editId = data.piUserId;
            this.dialogData.form.projectName = data.piName;
            this.dialogData.form.capital = data.piCapital;
            this.dialogData.form.userName = data.piUserName;
            this.dialogData.form.userTel = data.piPhone;
            this.dialogData.form.field = data.piTagId;
            this.dialogData.form.advantage = data.piAdvantage;
            this.dialogData.form.describe = data.piContent;
        },
        //删除
        delBtnclick(id){
            startBusinessDelSub({piId:id}).then((res) => {
                if(res.code === 0){
                    this.$message.success("删除成功");
                    this.getList();
                }else{
                    this.$message(res.msg);
                }
            });
        }

    }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
</style>
